//
   Created by Administrator on 2015/11/7 0007.

extends ./layerout-pc

block style
    style.
        .sign-out {
            margin-top: 1em;
        }

        .cover {
            padding: 30px;
        }

        .cover img {
            width: 100%;
        }

        .reset {
            margin-left: 2em;
        }

        .del-btn, .edit-btn {
            margin-top: .3em;
            margin-right: .3em;
        }
block content
    nav.teal
        ul.right.hide-on-med-and-down
            li
                a(href="/manage-video") 全部
            each value, key in list.group
                li
                    a(href="/manage-video?groupid=#{key}")= value
            li
                a(href="/add-video", target="_blank") 添加新视频
            li
                a(href="/menu") 菜单管理
            li
                a(href="/sign-out") 退出
        ul#slide-out.side-nav
            each value, key in list.group
                li
                    a(href="/manage-video?groupid=#{key}")= value
            li
                a(href="/add-video", target="_blank") 添加新视频
            li
                a(href="/menu") 菜单管理
            li
                a(href="/sign-out") 退出
        a.button-collapse(href="#", data-activates="slide-out")
            i.mdi-navigation-menu

    .container(data-menu=menu)
        .row
            table.bordered
                thead
                    th sub_button
                    th(style="width:6%") type
                    th(style="width:10%") name
                    th(style="width:200px;max-width:20%;") url
                    th 操作
                tbody
                    if list
                        input(type="hidden", value=menu._id)
                        each v in menu.button
                            tr(data-name=v.name, data-value=v, data-subButton=v.sub_button)
                                td(data-key="sub_button")
                                    if v.sub_button.length > 0
                                        button.sub-button.btn.waves-effect.waves-light(data-value=v.sub_button) 子菜单
                                td(data-key="type", data-value=v.type)
                                    span=v.type
                                td(data-key="name", data-value=v.name)
                                    span=v.name
                                td(data-key="url", data-value=v.url)
                                    span=v.url
                                td(data-key="caozuo")
                                    button.edit.btn.waves-effect.waves-light 编辑
                                    button.del.btn.waves-effect.waves-light 删除
                            if v.sub_button.length > 0
                                each s,i in v.sub_button
                                    tr(data-name=s.name, data-value=s, parent-name=v.name, style="display:none")
                                        td(data-key="sub_button")=i + 1
                                        td(data-key="type", data-value=s.type)
                                            span=s.type
                                        td(data-key="name", data-value=s.name)
                                            span=s.name
                                        td(data-key="url", data-value=s.url)
                                            span=s.url
                                        td(data-key="caozuo")
                                            button.edit.btn.waves-effect.waves-light 编辑
                                            button.del.btn.waves-effect.waves-light 删除
        .row
            button.add-menu.btn.waves-effect.waves-light 添加子菜单
        .row
            button.save.btn.waves-effect.waves-light 保存
            a.reset.btn.waves-effect.waves-light(href="/menu") 撤销

block script
    script(src="/lodash.min.js")
    script.

        $(".save").click(function (e) {
            var data = {
                button: []
            }
            var button = data.button;

            _.each($("tbody tr"), function (tr, i) {
                var $tr = $(tr)
                var value = $tr.data("value")
                value["sub_button"] = [];
                var parent = $tr.attr("parent-name")
                if (parent) {
                    value.parent = parent
                }
                button.push(value)
            })

            _.each(button, function (value, i) {
                var parent = value["parent"]
                if (parent) {
                    var p = _.find(button, {"name": parent})
                    p["sub_button"].push(value)
                }
            })
            _.remove(button, function (v) {
                return v.parent
            })
            console.log(data);
            $.ajax("/menu", {
                type: "POST",
                data: JSON.stringify({menu: data}),
                contentType: "application/json"
            }).then(function (r) {
                if (r && r.errmsg == "ok") {
                    Materialize.toast('添加成功', 1000)
                    setTimeout(function () {
                        location.reload();
                    }, 2000)
                }else{
                    alert(JSON.stringify(r))
                }
            })
        })

        $("body").on('click', '.edit', function (e) {
            var $this = $(e.currentTarget)
            var $tr = $this.closest("tr")
            var $tds = $tr.find("td");
            if (!$tds.find("span").is(":visible")) {
                $inputs = $tds.find("input")
                var data = {}
                _.each($inputs, function (input, i) {
                    var $input = $(input)
                    var key = $input.attr("key")
                    var value = $input.val()
                    $input.parent().find("span").html(value)
                    data[key] = value
                })

                if ($tr.data("subbutton")) {
                    var odd = $tr.attr("data-name")
                    $tr.attr("data-name", data.name)
                    $("table").find("tr[parent-name=" + odd + "]").attr("parent-name", data.name)
                }

                $tr.data("value", data)
                $tds.find("input").remove()
                $tds.find("span").show(400)
                $this.html("编辑")
                return
            }
            $this.html("收起")
            values = $tr.data("value")
            for (var i = 0; i < $tds.length; i++) {
                var $td = $($tds[i])
                var key = $td.attr("data-key")
                var value = values[key]
                if (key && key != "sub_button" && key != "caozuo") {
                    $input = $("<input>", {
                        type: "text",
                        key: key,
                        value: value
                    })
                    $td.find("span").hide(300)
                    $td.append($input)
                }
            }
        })

        $("body").on('click', '.del', function (e) {
            var $this = $(e.currentTarget)
            var $tr = $this.closest("tr")
            if (confirm('是否删除?')) {
                $tr.remove()
                if ($tr.data("subbutton")) {
                    name = $tr.data("name")
                    $("table").find("tr[parent-name=" + name + "]").remove()
                }
            }
        })

        $("body").on('click', '.sub-button', function (e) {
            var $this = $(e.currentTarget)
            var $tr = $this.closest("tr")
            name = $tr.data("name")
            var $subs = $("table").find("tr[parent-name=" + name + "]")
            if ($subs.is(":visible")) {
                $subs.hide(400)
            } else {
                $subs.show(700)
            }
        })

        $("body").on('click', '.add-menu', function (e) {

            var $last = $("table").find("tr[parent-name=" + name + "]").last()

            var parent = $(".sub-button").closest("tr").data("name")
            var $tr = $("<tr data-name='' data-value='' parent-name=" + parent + ">" +
                    "<td></td>" +
                    "<td data-key='type' data-value=''><span style='display: none'></span><input type='text' key='type'></td>" +
                    "<td data-key='name'><span style='display: none'></span><input type='text' key='name'></td>" +
                    "<td data-key='url', data-value=''><span style='display: none'></span><input type='text' key='url'></td>" +
                    "<td><button class='edit btn waves-effect waves-light'>收起</button><button class='del btn waves-effect waves-light'>删除</button></td>" +
                    "</tr>")
            $tr.insertAfter($last)
        })
